<template>
  <div class="note_filling">
    <el-dialog
      :title="title"
      :visible.sync="dialogVisible"
      width="400px"
      v-dialogDrag
      :close-on-click-modal="false"
      customClass="mes_dialog">
      <div class="note_cont">
        <div class="note_describe">{{describe}}</div>
        <div class="note_remarks">
          <el-input type="textarea"
                    :autosize="{ minRows: 3, maxRows: 6}"
                    placeholder="请输入备注"
                    resize="none"
                    maxlength="255"
                    v-model="remarks"></el-input>
        </div>
      </div>
      <span slot="footer" class="dialog-footer mes_btn">
        <el-button type="primary" @click="submit">提交</el-button>
        <el-button @click="dialogVisible = false">取消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'NoteFilling',
  props: {
    title: String, // 弹框标题
    describe: String // 弹框描述
  },
  data() {
    return {
      dialogVisible: false, // 是否显示
      remarks: '' // 备注
    }
  },
  methods: {
    // 打开并清空
    openDialog() {
      this.remarks = ''
      this.dialogVisible = true
    },
    // 提交
    submit() {
      this.$emit('success', this.remarks)
    }
  }
}
</script>
<style lang="less">
  .note_filling{
    .el-textarea__inner{
      font-size: 14px;
    }
  }
</style>
<style scoped lang="less">
  .note_filling{
    .note_remarks{
      margin-top: 20px;
    }
  }
</style>
